var count = 0, check = 0;
var a, b, c, d,tapX,tapY;

var coinImage = new Image();
coinImage.src = "images/coin-sprite-animation.png";

function gameLoop() {
window.requestAnimationFrame(gameLoop);

coin.update();
coin1.update();

coin.render();
coin1.render();

//coin1.render();

}

// Start the game loop as soon as the sprite sheet is loaded
coinImage.addEventListener("load", gameLoop);

function sprite(options) {

var that = {}, frameIndex = 0, tickCount = 0, i = options.i || 0, j = options.j || 0, ticksPerFrame = options.ticksPerFrame || 0, numberOfFrames = options.numberOfFrames || 1;

that.i = options.i;
that.j = options.j;
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;

that.loop = options.loop;

that.update = function() {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) {

// Go to the next frame
frameIndex += 1;
} else if (that.loop) {
frameIndex = 0;
} else {
frameIndex = 0;
}
}
};
that.che=function(){
if (tapX >= i && tapX <= i + 100) {
if (tapY >= j && tapY <= j + 100) {
count++;
check = 1;
if (count == 2) {
//alert(coin.i+" y: "+coin.j);
count = 0;
check = 0;
coin.regame();
coin1.regame();
}

}
}
}

that.remove = function() {
that.context.clearRect(i, j, 100, that.height);
i = 9000;
j = 9000;
};
that.regame = function() {
that.context.clearRect(i, j, 100, that.height);
i = (Math.random() * (500));
j = (Math.random() * (500));
//a=i;b=j;
};

that.render = function() {

// Clear the canvas
that.context.clearRect(i, j, 100, that.height);

// Draw the animation
that.context.drawImage(that.image, frameIndex * that.width / numberOfFrames, 0, that.width / numberOfFrames, that.height, i, j, that.width / numberOfFrames, that.height);

};

return that;
}

var canvas = document.getElementById("coinAnimation");
canvas.width = 1000;
canvas.height = 1000;

var coin = sprite({
context : canvas.getContext("2d"),
width : 1000,
height : 100,
i : (Math.random() * (500)),
j : (Math.random() * (500)),
image : coinImage,
numberOfFrames : 10,
ticksPerFrame : 4
});
var coin1 = sprite({
context : canvas.getContext("2d"),
width : 1000,
height : 100,
i : (Math.random() * (500)),
j : (Math.random() * (500)),
image : coinImage,
numberOfFrames : 10,
ticksPerFrame : 1
});

canvas.addEventListener("mousedown", tap);
function tap(e) {
//alert("Hello! I am an alert box!");
tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX, tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
//alert("coin.i: "coin.i+" coin.j: "+coin.j+" coin1.i: "coin1.i+" coin1.j: "+coin1.j+" tapX: "tapX+" tapY: "+tapY);
//alert("Hello! I am an alert box!");
//alert(tapX+" y: "+tapY);


coin.che();

if(check==1)
{
coin.remove();
check=0;
}
coin1.che();

if(check==1)
{
check=0;
coin1.remove();
}
//coin.update();
//coin.render();

//alert(coin.i + " y: " + coin.j + "coin1.i: " + coin1.i + " coin1.j: " + coin1.j + " count: " + count + "check: " + check);
//coin.remove();

//coin1.update();
//coin1.render();
}